<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>AbortController</h1>

    <button id="btn1">开启请求</button>
    <button id="btn2">取消请求</button>

    <script>
      let ABC;

      btn1.onclick = function () {
        // 1. 创建一个 AbortController 实例对象
        ABC = new AbortController();

        const url = `https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=6097203`;

        fetch(url, {
          // 2. 将 ABC 的 signal 赋值给 fetch 的 signal 配置
          signal: ABC.signal,
          headers: {
            "X-Host": "mall.film-ticket.film.list"
          }
        })
          .then(response => response.json())
          .then(resp => {
            console.log("resp", resp);
          })
          .catch(error => {
            console.log("catch", error);
          });
      };

      btn2.onclick = function () {
        ABC.abort();
      };
    </script>
  </body>
</html>

<!-- 

  A           AA
  AB          ABAB


  

-->
